<div xmlns:ext="http://www.extjs.com" class="body-wrap"><h1>Class <a href="source/StatusBar.html#cls-Ext.ux.StatusBar">Ext.ux.StatusBar</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.ux</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/StatusBar.html#cls-Ext.ux.StatusBar">StatusBar.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/StatusBar.html#cls-Ext.ux.StatusBar">StatusBar</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr></table><div class="description"><p>Basic status bar component that can be used as the bottom toolbar of any <a href="output/Ext.Panel.html" ext:cls="Ext.Panel">Ext.Panel</a>.  In addition to
supporting the standard <a href="output/Ext.Toolbar.html" ext:cls="Ext.Toolbar">Ext.Toolbar</a> interface for adding buttons, menus and other items, the StatusBar
provides a greedy status element that can be aligned to either side and has convenient methods for setting the
status text and icon.  You can also indicate that something is processing using the <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a> method.</p>
<pre><code><b>new</b> Ext.Panel({
    title: <em>'StatusBar'</em>,
    <i>// etc.</i>
    bbar: <b>new</b> Ext.ux.StatusBar({
        id: <em>'my-status'</em>,

        <i>// defaults to use when the status is cleared:</i>
        defaultText: <em>'Default status text'</em>,
        defaultIconCls: <em>'<b>default</b>-icon'</em>,

        <i>// values to set initially:</i>
        text: <em>'Ready'</em>,
        iconCls: <em>'ready-icon'</em>,

        <i>// any standard Toolbar items:</i>
        items: [{
            text: <em>'A Button'</em>
        }, <em>'-'</em>, <em>'Plain Text'</em>]
    })
});

<i>// Update the status bar later <b>in</b> code:</i>
<b>var</b> sb = Ext.getCmp(<em>'my-status'</em>);
sb.setStatus({
    text: <em>'OK'</em>,
    iconCls: <em>'ok-icon'</em>,
    clear: true <i>// auto-clear after a set interval</i>
});

<i>// Set the status bar to show that something is processing:</i>
sb.showBusy();

<i>// processing....</i>

sb.clearStatus(); <i>// once completeed</i></code></pre></div><div class="hr"></div><a id="Ext.ux.StatusBar-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-autoClear"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-autoClear">autoClear</a></b> : Number<div class="mdesc"><div class="short">The number of milliseconds to wait after setting the status via
setStatus before automatically clearing the status
te...</div><div class="long">The number of milliseconds to wait after setting the status via
<code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a></code> before automatically clearing the status
text and icon (defaults to <tt>5000</tt>).  Note that this only applies
when passing the <tt>clear</tt> argument to <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a></code>
since that is the only way to defer clearing the status.  This can
be overridden by specifying a different <tt>wait</tt> value in
<code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a></code>. Calls to <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-clearStatus" ext:member="clearStatus" ext:cls="Ext.ux.StatusBar">clearStatus</a></code>
always clear the status bar immediately and ignore this value.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-autoClear"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-autoClear">autoClear</a></b> : Number<div class="mdesc"><div class="short">The number of milliseconds to wait after setting the status via
setStatus before automatically clearing the status
te...</div><div class="long">The number of milliseconds to wait after setting the status via
<code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a></code> before automatically clearing the status
text and icon (defaults to <tt>5000</tt>).  Note that this only applies
when passing the <tt>clear</tt> argument to <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a></code>
since that is the only way to defer clearing the status.  This can
be overridden by specifying a different <tt>wait</tt> value in
<code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a></code>. Calls to <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-clearStatus" ext:member="clearStatus" ext:cls="Ext.ux.StatusBar">clearStatus</a></code>
always clear the status bar immediately and ignore this value.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-busyIconCls"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-busyIconCls">busyIconCls</a></b> : String<div class="mdesc"><div class="short">The default iconCls applied when calling
showBusy (defaults to 'x-status-busy').
It can be overridden at any time by ...</div><div class="long">The default <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-iconCls" ext:member="iconCls" ext:cls="Ext.ux.StatusBar">iconCls</a></code> applied when calling
<code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a></code> (defaults to <tt>'x-status-busy'</tt>).
It can be overridden at any time by passing the <code>iconCls</code>
argument into <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a></code>.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-busyIconCls"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-busyIconCls">busyIconCls</a></b> : String<div class="mdesc"><div class="short">The default iconCls applied when calling
showBusy (defaults to 'x-status-busy').
It can be overridden at any time by ...</div><div class="long">The default <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-iconCls" ext:member="iconCls" ext:cls="Ext.ux.StatusBar">iconCls</a></code> applied when calling
<code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a></code> (defaults to <tt>'x-status-busy'</tt>).
It can be overridden at any time by passing the <code>iconCls</code>
argument into <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a></code>.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-busyText"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-busyText">busyText</a></b> : String<div class="mdesc"><div class="short">The default text applied when calling
showBusy (defaults to 'Loading...').
It can be overridden at any time by passin...</div><div class="long">The default <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-text" ext:member="text" ext:cls="Ext.ux.StatusBar">text</a></code> applied when calling
<code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a></code> (defaults to <tt>'Loading...'</tt>).
It can be overridden at any time by passing the <code>text</code>
argument into <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a></code>.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-busyText"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-busyText">busyText</a></b> : String<div class="mdesc"><div class="short">The default text applied when calling
showBusy (defaults to 'Loading...').
It can be overridden at any time by passin...</div><div class="long">The default <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-text" ext:member="text" ext:cls="Ext.ux.StatusBar">text</a></code> applied when calling
<code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a></code> (defaults to <tt>'Loading...'</tt>).
It can be overridden at any time by passing the <code>text</code>
argument into <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a></code>.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-cls"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-cls">cls</a></b> : String<div class="mdesc">The base class applied to the containing element for this component on render (defaults to 'x-statusbar')</div></td><td class="msource">StatusBar</td></tr><tr class="config-row  "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-cls"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-cls">cls</a></b> : String<div class="mdesc">The base class applied to the containing element for this component on render (defaults to 'x-statusbar')</div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-defaultIconCls"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-defaultIconCls">defaultIconCls</a></b> : String<div class="mdesc"><div class="short">The default iconCls value (see the iconCls docs for additional details about customizing the icon).
This will be used...</div><div class="long">The default <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-iconCls" ext:member="iconCls" ext:cls="Ext.ux.StatusBar">iconCls</a> value (see the iconCls docs for additional details about customizing the icon).
This will be used anytime the status bar is cleared with the <tt>useDefaults:true</tt> option (defaults to '').</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-defaultIconCls"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-defaultIconCls">defaultIconCls</a></b> : String<div class="mdesc"><div class="short">The default iconCls value (see the iconCls docs for additional details about customizing the icon).
This will be used...</div><div class="long">The default <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-iconCls" ext:member="iconCls" ext:cls="Ext.ux.StatusBar">iconCls</a> value (see the iconCls docs for additional details about customizing the icon).
This will be used anytime the status bar is cleared with the <tt>useDefaults:true</tt> option (defaults to '').</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-defaultText"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-defaultText">defaultText</a></b> : String<div class="mdesc"><div class="short">The default text value.  This will be used anytime the status bar is cleared with the
useDefaults:true option (defaul...</div><div class="long">The default <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-text" ext:member="text" ext:cls="Ext.ux.StatusBar">text</a> value.  This will be used anytime the status bar is cleared with the
<tt>useDefaults:true</tt> option (defaults to '').</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-defaultText"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-defaultText">defaultText</a></b> : String<div class="mdesc"><div class="short">The default text value.  This will be used anytime the status bar is cleared with the
useDefaults:true option (defaul...</div><div class="long">The default <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-text" ext:member="text" ext:cls="Ext.ux.StatusBar">text</a> value.  This will be used anytime the status bar is cleared with the
<tt>useDefaults:true</tt> option (defaults to '').</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-emptyText"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-emptyText">emptyText</a></b> : String<div class="mdesc"><div class="short">The text string to use if no text has been set.  Defaults to
'&amp;nbsp;').  If there are no other items in the toolbar u...</div><div class="long">The text string to use if no text has been set.  Defaults to
<tt>'&nbsp;'</tt>).  If there are no other items in the toolbar using
an empty string (<tt>''</tt>) for this value would end up in the toolbar
height collapsing since the empty string will not maintain the toolbar
height.  Use <tt>''</tt> if the toolbar should collapse in height
vertically when no text is specified and there are no other items in
the toolbar.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-emptyText"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-emptyText">emptyText</a></b> : String<div class="mdesc"><div class="short">The text string to use if no text has been set.  Defaults to
'&amp;nbsp;').  If there are no other items in the toolbar u...</div><div class="long">The text string to use if no text has been set.  Defaults to
<tt>'&nbsp;'</tt>).  If there are no other items in the toolbar using
an empty string (<tt>''</tt>) for this value would end up in the toolbar
height collapsing since the empty string will not maintain the toolbar
height.  Use <tt>''</tt> if the toolbar should collapse in height
vertically when no text is specified and there are no other items in
the toolbar.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-iconCls"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-iconCls">iconCls</a></b> : String<div class="mdesc"><div class="short">A CSS class that will be initially set as the status bar icon and is
expected to provide a background image (defaults...</div><div class="long">A CSS class that will be <b>initially</b> set as the status bar icon and is
expected to provide a background image (defaults to '').
Example usage:<pre><code><i>// Example CSS rule:</i>
.x-statusbar .x-status-custom {
    padding-left: 25px;
    background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
}

<i>// Setting a <b>default</b> icon:</i>
<b>var</b> sb = <b>new</b> Ext.ux.StatusBar({
    defaultIconCls: <em>'x-status-custom'</em>
});

<i>// Changing the icon:</i>
sb.setStatus({
    text: <em>'New status'</em>,
    iconCls: <em>'x-status-custom'</em>
});</code></pre></div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-iconCls"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-iconCls">iconCls</a></b> : String<div class="mdesc"><div class="short">A CSS class that will be initially set as the status bar icon and is
expected to provide a background image (defaults...</div><div class="long">A CSS class that will be <b>initially</b> set as the status bar icon and is
expected to provide a background image (defaults to '').
Example usage:<pre><code><i>// Example CSS rule:</i>
.x-statusbar .x-status-custom {
    padding-left: 25px;
    background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
}

<i>// Setting a <b>default</b> icon:</i>
<b>var</b> sb = <b>new</b> Ext.ux.StatusBar({
    defaultIconCls: <em>'x-status-custom'</em>
});

<i>// Changing the icon:</i>
sb.setStatus({
    text: <em>'New status'</em>,
    iconCls: <em>'x-status-custom'</em>
});</code></pre></div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-statusAlign"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-statusAlign">statusAlign</a></b> : String<div class="mdesc"><div class="short">The alignment of the status element within the overall StatusBar layout.  When the StatusBar is rendered,
it creates ...</div><div class="long">The alignment of the status element within the overall StatusBar layout.  When the StatusBar is rendered,
it creates an internal div containing the status text and icon.  Any additional Toolbar items added in the
StatusBar's <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-items" ext:member="items" ext:cls="Ext.ux.StatusBar">items</a> config, or added via <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-add" ext:member="add" ext:cls="Ext.ux.StatusBar">add</a> or any of the supported add* methods, will be
rendered, in added order, to the opposite side.  The status element is greedy, so it will automatically
expand to take up all sapce left over by any other items.  Example usage:
<pre><code><i>// Create a left-aligned status bar containing a button,</i>
<i>// separator and text item that will be right-aligned (<b>default</b>):</i>
<b>new</b> Ext.Panel({
    title: <em>'StatusBar'</em>,
    <i>// etc.</i>
    bbar: <b>new</b> Ext.ux.StatusBar({
        defaultText: <em>'Default status text'</em>,
        id: <em>'status-id'</em>,
        items: [{
            text: <em>'A Button'</em>
        }, <em>'-'</em>, <em>'Plain Text'</em>]
    })
});

<i>// By adding the statusAlign config, this will create the</i>
<i>// exact same toolbar, except the status and toolbar item</i>
<i>// layout will be reversed from the previous example:</i>
<b>new</b> Ext.Panel({
    title: <em>'StatusBar'</em>,
    <i>// etc.</i>
    bbar: <b>new</b> Ext.ux.StatusBar({
        defaultText: <em>'Default status text'</em>,
        id: <em>'status-id'</em>,
        statusAlign: <em>'right'</em>,
        items: [{
            text: <em>'A Button'</em>
        }, <em>'-'</em>, <em>'Plain Text'</em>]
    })
});</code></pre></div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-statusAlign"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-statusAlign">statusAlign</a></b> : String<div class="mdesc"><div class="short">The alignment of the status element within the overall StatusBar layout.  When the StatusBar is rendered,
it creates ...</div><div class="long">The alignment of the status element within the overall StatusBar layout.  When the StatusBar is rendered,
it creates an internal div containing the status text and icon.  Any additional Toolbar items added in the
StatusBar's <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-items" ext:member="items" ext:cls="Ext.ux.StatusBar">items</a> config, or added via <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-add" ext:member="add" ext:cls="Ext.ux.StatusBar">add</a> or any of the supported add* methods, will be
rendered, in added order, to the opposite side.  The status element is greedy, so it will automatically
expand to take up all sapce left over by any other items.  Example usage:
<pre><code><i>// Create a left-aligned status bar containing a button,</i>
<i>// separator and text item that will be right-aligned (<b>default</b>):</i>
<b>new</b> Ext.Panel({
    title: <em>'StatusBar'</em>,
    <i>// etc.</i>
    bbar: <b>new</b> Ext.ux.StatusBar({
        defaultText: <em>'Default status text'</em>,
        id: <em>'status-id'</em>,
        items: [{
            text: <em>'A Button'</em>
        }, <em>'-'</em>, <em>'Plain Text'</em>]
    })
});

<i>// By adding the statusAlign config, this will create the</i>
<i>// exact same toolbar, except the status and toolbar item</i>
<i>// layout will be reversed from the previous example:</i>
<b>new</b> Ext.Panel({
    title: <em>'StatusBar'</em>,
    <i>// etc.</i>
    bbar: <b>new</b> Ext.ux.StatusBar({
        defaultText: <em>'Default status text'</em>,
        id: <em>'status-id'</em>,
        statusAlign: <em>'right'</em>,
        items: [{
            text: <em>'A Button'</em>
        }, <em>'-'</em>, <em>'Plain Text'</em>]
    })
});</code></pre></div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-text"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-text">text</a></b> : String<div class="mdesc"><div class="short">A string that will be initially set as the status message.  This string
will be set as innerHTML (html tags are accep...</div><div class="long">A string that will be <b>initially</b> set as the status message.  This string
will be set as innerHTML (html tags are accepted) for the toolbar item.
If not specified, the value set for <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-defaultText" ext:member="defaultText" ext:cls="Ext.ux.StatusBar">defaultText</a></code>
will be used.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-text"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-text">text</a></b> : String<div class="mdesc"><div class="short">A string that will be initially set as the status message.  This string
will be set as innerHTML (html tags are accep...</div><div class="long">A string that will be <b>initially</b> set as the status message.  This string
will be set as innerHTML (html tags are accepted) for the toolbar item.
If not specified, the value set for <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-defaultText" ext:member="defaultText" ext:cls="Ext.ux.StatusBar">defaultText</a></code>
will be used.</div></div></td><td class="msource">StatusBar</td></tr></tbody></table><a id="Ext.ux.StatusBar-props"></a><h2>Public Properties</h2><div class="no-members">This class has no public properties.</div><a id="Ext.ux.StatusBar-methods"></a><h2>Public Methods</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Method</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-StatusBar"></a><b class="constructor"><a href="source/StatusBar.html#cls-Ext.ux.StatusBar">StatusBar</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">Object/Array&nbsp;config</span><span class="closeparen">&nbsp;)</span><div class="mdesc"><div class="short">Creates a new StatusBar</div><div class="long">Creates a new StatusBar<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>config</code> : Object/Array<div class="sub-desc">A config object</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">StatusBar</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-clearStatus"></a><b class="method"><a href="source/ux-all-debug.html#method-Ext.ux.StatusBar-clearStatus">clearStatus</a></b><span class="openparen">(&nbsp;</span><span title="Optional" class="optional">[Object&nbsp;config]</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">Ext.ux.StatusBar</span><div class="mdesc"><div class="short">Clears the status text and iconCls. Also supports clearing via an optional fade out animation.</div><div class="long">Clears the status <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-text" ext:member="text" ext:cls="Ext.ux.StatusBar">text</a> and <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-iconCls" ext:member="iconCls" ext:cls="Ext.ux.StatusBar">iconCls</a>. Also supports clearing via an optional fade out animation.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>config</code> : Object<div class="sub-desc">(optional) A config object containing any or all of the following properties.  If this
object is not specified the status will be cleared using the defaults below:<ul>
<li><tt>anim</tt> {Boolean} : (optional) True to clear the status by fading out the status element (defaults
to false which clears immediately).</li>
<li><tt>useDefaults</tt> {Boolean} : (optional) True to reset the text and icon using <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-defaultText" ext:member="defaultText" ext:cls="Ext.ux.StatusBar">defaultText</a> and
<a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-defaultIconCls" ext:member="defaultIconCls" ext:cls="Ext.ux.StatusBar">defaultIconCls</a> (defaults to false which sets the text to '' and removes any existing icon class).</li>
</ul></div></li></ul><strong>Returns:</strong><ul><li><code>Ext.ux.StatusBar</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource">StatusBar</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-getText"></a><b class="method"><a href="source/ux-all-debug.html#method-Ext.ux.StatusBar-getText">getText</a></b><span class="openparen">(</span><span class="closeparen">)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">String</span><div class="mdesc"><div class="short">Returns the current status text.</div><div class="long">Returns the current status text.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>String</code><div class="sub-desc">The status text</div></li></ul></div></div></div></td><td class="msource">StatusBar</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-setIcon"></a><b class="method"><a href="source/ux-all-debug.html#method-Ext.ux.StatusBar-setIcon">setIcon</a></b><span class="openparen">(&nbsp;</span><span title="Optional" class="optional">[String&nbsp;iconCls]</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">Ext.ux.StatusBar</span><div class="mdesc"><div class="short">Convenience method for setting the status icon directly.  For more flexible options see setStatus.
See iconCls for co...</div><div class="long">Convenience method for setting the status icon directly.  For more flexible options see <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a>.
See <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-iconCls" ext:member="iconCls" ext:cls="Ext.ux.StatusBar">iconCls</a> for complete details about customizing the icon.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>iconCls</code> : String<div class="sub-desc">(optional) The icon class to set (defaults to '', and any current icon class is removed)</div></li></ul><strong>Returns:</strong><ul><li><code>Ext.ux.StatusBar</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource">StatusBar</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-setStatus"></a><b class="method"><a href="source/ux-all-debug.html#method-Ext.ux.StatusBar-setStatus">setStatus</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">Object/String&nbsp;config</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">Ext.ux.StatusBar</span><div class="mdesc"><div class="short">Sets the status text and/or iconCls. Also supports automatically clearing the
status that was set after a specified i...</div><div class="long">Sets the status <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-text" ext:member="text" ext:cls="Ext.ux.StatusBar">text</a> and/or <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-iconCls" ext:member="iconCls" ext:cls="Ext.ux.StatusBar">iconCls</a>. Also supports automatically clearing the
status that was set after a specified interval.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>config</code> : Object/String<div class="sub-desc">A config object specifying what status to set, or a string assumed
to be the status text (and all other options are defaulted as explained below). A config
object containing any or all of the following properties can be passed:<ul>
<li><tt>text</tt> {String} : (optional) The status text to display.  If not specified, any current
status text will remain unchanged.</li>
<li><tt>iconCls</tt> {String} : (optional) The CSS class used to customize the status icon (see
<a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-iconCls" ext:member="iconCls" ext:cls="Ext.ux.StatusBar">iconCls</a> for details). If not specified, any current iconCls will remain unchanged.</li>
<li><tt>clear</tt> {Boolean/Number/Object} : (optional) Allows you to set an internal callback that will
automatically clear the status text and iconCls after a specified amount of time has passed. If clear is not
specified, the new status will not be auto-cleared and will stay until updated again or cleared using
<a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-clearStatus" ext:member="clearStatus" ext:cls="Ext.ux.StatusBar">clearStatus</a>. If <tt>true</tt> is passed, the status will be cleared using <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-autoClear" ext:member="autoClear" ext:cls="Ext.ux.StatusBar">autoClear</a>,
<a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-defaultText" ext:member="defaultText" ext:cls="Ext.ux.StatusBar">defaultText</a> and <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-defaultIconCls" ext:member="defaultIconCls" ext:cls="Ext.ux.StatusBar">defaultIconCls</a> via a fade out animation. If a numeric value is passed,
it will be used as the callback interval (in milliseconds), overriding the <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-autoClear" ext:member="autoClear" ext:cls="Ext.ux.StatusBar">autoClear</a> value.
All other options will be defaulted as with the boolean option.  To customize any other options,
you can pass an object in the format:<ul>
<li><tt>wait</tt> {Number} : (optional) The number of milliseconds to wait before clearing
(defaults to <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-autoClear" ext:member="autoClear" ext:cls="Ext.ux.StatusBar">autoClear</a>).</li>
<li><tt>anim</tt> {Number} : (optional) False to clear the status immediately once the callback
executes (defaults to true which fades the status out).</li>
<li><tt>useDefaults</tt> {Number} : (optional) False to completely clear the status text and iconCls
(defaults to true which uses <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-defaultText" ext:member="defaultText" ext:cls="Ext.ux.StatusBar">defaultText</a> and <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-defaultIconCls" ext:member="defaultIconCls" ext:cls="Ext.ux.StatusBar">defaultIconCls</a>).</li>
</ul></li></ul>
Example usage:<pre><code><i>// Simple call to update the text</i>
statusBar.setStatus(<em>'New status'</em>);

<i>// Set the status and icon, auto-clearing <b>with</b> <b>default</b> options:</i>
statusBar.setStatus({
    text: <em>'New status'</em>,
    iconCls: <em>'x-status-custom'</em>,
    clear: true
});

<i>// Auto-clear <b>with</b> custom options:</i>
statusBar.setStatus({
    text: <em>'New status'</em>,
    iconCls: <em>'x-status-custom'</em>,
    clear: {
        wait: 8000,
        anim: false,
        useDefaults: false
    }
});</code></pre></div></li></ul><strong>Returns:</strong><ul><li><code>Ext.ux.StatusBar</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource">StatusBar</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-setText"></a><b class="method"><a href="source/ux-all-debug.html#method-Ext.ux.StatusBar-setText">setText</a></b><span class="openparen">(&nbsp;</span><span title="Optional" class="optional">[String&nbsp;text]</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">Ext.ux.StatusBar</span><div class="mdesc"><div class="short">Convenience method for setting the status text directly.  For more flexible options see setStatus.</div><div class="long">Convenience method for setting the status text directly.  For more flexible options see <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a>.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>text</code> : String<div class="sub-desc">(optional) The text to set (defaults to '')</div></li></ul><strong>Returns:</strong><ul><li><code>Ext.ux.StatusBar</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource">StatusBar</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.ux.StatusBar-showBusy"></a><b class="method"><a href="source/ux-all-debug.html#method-Ext.ux.StatusBar-showBusy">showBusy</a></b><span class="openparen">(&nbsp;</span><span title="Optional" class="optional">[Object/String&nbsp;config]</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">Ext.ux.StatusBar</span><div class="mdesc"><div class="short">Convenience method for setting the status text and icon to special values that are pre-configured to indicate
a "busy...</div><div class="long">Convenience method for setting the status text and icon to special values that are pre-configured to indicate
a "busy" state, usually for loading or processing activities.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>config</code> : Object/String<div class="sub-desc">(optional) A config object in the same format supported by <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a>, or a
string to use as the status text (in which case all other options for setStatus will be defaulted).  Use the
<tt>text</tt> and/or <tt>iconCls</tt> properties on the config to override the default <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-busyText" ext:member="busyText" ext:cls="Ext.ux.StatusBar">busyText</a>
and <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-busyIconCls" ext:member="busyIconCls" ext:cls="Ext.ux.StatusBar">busyIconCls</a> settings. If the config argument is not specified, <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-busyText" ext:member="busyText" ext:cls="Ext.ux.StatusBar">busyText</a> and
<a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-busyIconCls" ext:member="busyIconCls" ext:cls="Ext.ux.StatusBar">busyIconCls</a> will be used in conjunction with all of the default options for <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a>.</div></li></ul><strong>Returns:</strong><ul><li><code>Ext.ux.StatusBar</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource">StatusBar</td></tr></tbody></table><a id="Ext.ux.StatusBar-events"></a><h2>Public Events</h2><div class="no-members">This class has no public events.</div></div>